<template>
  <div class="caiDan">
    <div class="head">
      <p>选择咖啡和小食</p>
    </div>
      <!-- 头部轮播 -->
    <div class="mid">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img class="swiper-img" src="http://www.sunlulu.club/img/lb1.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="swiper-img" src="http://www.sunlulu.club/img/lb2.png" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="box">
        <div class="left">
          <ul>
            <div class="x"></div>
            <li @click="checkAll(index)"
                :class="{red:i == index}"
                v-for='(v,index) in lists'
                :key="index">
              <p>{{v.name}}</p>
              <div class="x"></div>
            </li>
          </ul>
        </div>
      <div class="right">
        <ul>
            <li v-for="v in list" :key="v.id" >
            <van-card @click="zx(v._id)"
              :price="v.price"
              :desc="v.descriptions"
              :title="v.name"
              :thumb='v.coverImg'
            >
              <div slot="footer">
                <van-icon name="add-o" size="20px" color="rgba(136, 175, 213, 1)" class="tianjia"></van-icon>
              </div>
            </van-card>
          </li>
        </ul>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { loadProducts } from '../api/product'
export default {
  data() {
    return {
      i: '',
      list: [],
      lists: [{
        id:1,
        name: '人气TOP'
    },{
      id:2,
        name: '大师咖啡'
    },{
      id:3,
        name: '零度拿铁'
    },{
      id:4,
        name: '瑞纳冰'
    },{
      id:5,
        name: '经典饮品'
    },{
      id:6,
        name: '健康轻食'
    },{
      id:7,
        name: '鲜榨果蔬汁'
    }]
    };
  },
  //默认显示的列表数据
  async created() {
    const res = await loadProducts();
    this.list = res.data.products;

  },

  methods: {
    checkAll(index) {
      this.i = index;
      let p = this.i + 5;
      this.Res(p)
      // const res = await loadProducts({'page':2})
    },
    //页数改变时重新请求数据
    async Res(page){
      const res = await loadProducts(page)
      this.list = res.data.products;
      },
      //点击添加按钮，将商品id添加附件到URL之后传过去
      zx(id) {
        this.$router.push({name:"Detail",query:{
          id
        }})
      }
  }
};
</script>
<style scoped>
.caiDan{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head{
  height: 64px;
}
.head p{
  width: 375px;
	color: rgba(56, 56, 56, 1);
	background-color: rgba(255, 255, 255, 1);
	font-size: 18px;
	line-height: 150%;
	text-align: center;
	font-weight: bold;
}
.swiper-img{
  width: 100%;
}
.mid{
  flex: 1;
  overflow: auto;
}
.left{
  width: 24%;
}
 .left li{
  width: 90px;
	height: 44px;

	text-align: center;
}
.left p{
  margin: 0;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
}
.x{
  width: 90px;
	height: 1px;
	color: rgba(80, 80, 80, 1);
	background-color: rgba(242, 242, 242, 1);
	text-align: center;
}
.right{
  width: 76%;
}
.right li{
  margin-bottom: 2px;
}
.box{
  display: flex;
}
.tianjia{
  margin-top: -20px;
}
.footer{
  height: 50px;
}
.red{
background-color: rgba(248, 248, 248, 1);
}

</style>
